<template>
	<view class="service-tips" v-if="userTeam?.length>0">
		<view class="service-text">服务提醒</view>
		<view class="servise-card">
			<view class="service-item">
				<view class="left-item-service">
					<image src="/static/icons/u2597.png" mode=""></image>
				</view>
				<view class="text-item-service">
					<view class="reminder-item">服务申请进度提醒</view>
					<view class="doctor-doctor">医生已经通过了您的签约申请，查看详情请到消息管理</view>
				</view>
				<view class="icon-item-service">
					<view class="icon-image">
						<image class="left-image" src="/static/icons/u1462.png" mode=""></image>
						<image class="right-image" src="/static/icons/u1334.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="servise-card">
			<view class="service-item">
				<view class="left-item-service">
					<image src="/static/icons/u2597.png" mode=""></image>
				</view>
				<view class="text-item-service">
					<view class="reminder-item">服务申请进度提醒</view>
					<view class="doctor-doctor">医生已经通过了您的签约申请，查看详情请到消息管理</view>
				</view>
				<view class="icon-item-service">
					<view class="icon-image">
						<image class="left-image" src="/static/icons/u1462.png" mode=""></image>
						<image class="right-image" src="/static/icons/u1334.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		getByResidentIdApi
	} from '../../api/home';
	import {
		useUserStore
	} from '../../store/user';
	const userStore = useUserStore()
	// console.log(userStore.userInfo?._id);
	const userTeam = ref([])
	onMounted(() => {
		getData()
		// console.log(35454545, '小提示');
		// console.log(userTeam.value);
	})
	const getData = () => {
		getByResidentIdApi({
				residentId: userStore.userInfo?._id
			})
			.then(res => {
				if (res.code == 200) {
					userTeam.value = res.data
				}
			})
	}
</script>

<style scoped lang="scss">
	.service-tips {
		background-color: #f5f5f5;
		overflow: hidden;
	}

	.service-text {
		margin: 0 32rpx;
		font-size: 40rpx;
		color: #333333;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}

	.servise-card {
		margin: 30rpx 32rpx;
		width: 670rpx;
		height: 176rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		border: 1rpx solid #E4EBF4;
		box-shadow: 0rpx 4rpx 8rpx 0rpx #f3f3f3;
	}

	.service-item {
		padding: 40rpx 30rpx;
		display: flex;
		// background-color: #333333;
	}

	.left-item-service {
		width: 88rpx;
		height: 88rpx;
		background-color: #FFF8E4;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.text-item-service {
		width: 420rpx;
		height: 50rpx;

		margin-left: 30rpx;
	}

	.reminder-item {
		font-size: 36rpx;
		color: #333333;
		padding-bottom: 10rpx;
	}

	.doctor-doctor {
		white-space: nowrap;
		/* 禁止换行 */
		overflow: hidden;
		/* 隐藏溢出内容 */
		text-overflow: ellipsis;
		/* 超出显示省略号 */
		width: 420rpx;
		height: 50rpx;
		font-size: 24rpx;
		color: #999999;
	}

	.icon-image {
		margin-top: 25rpx;
		margin-left: 20rpx;

		.left-image {
			width: 16rpx;
			height: 16rpx;
		}

		.right-image {
			width: 14rpx;
			height: 24rpx;
			margin-left: 20rpx;
		}
	}
</style>